<template>
    <div class="app-main-box" v-loading="loading_page">
        <!-- 搜索区域 -->
        <el-form class="global-search-form" v-show="showSearch" :model="queryParams" ref="queryRef" :inline="true">
            <el-form-item class="from-item" label="车牌号：" prop="plateNo">
                <el-input v-noSpace v-model="queryParams.plateNo" placeholder="请输入车牌号" clearable
                    @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item class="from-item" label="磅单号：" prop="weightBillNo" style="width: 260px;">
                <el-input v-noSpace v-model="queryParams.weightBillNo" placeholder="请输入磅单号" clearable
                    @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item class="from-item" label="箱号：" prop="containerNo">
                <el-input v-noSpace v-model="queryParams.containerNo" placeholder="请输入箱号" clearable
                    @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item class="from-item" label="线路：" prop="routeId">
                <el-select v-model="queryParams.routeId" placeholder="请选择线路" placement="right-end" filterable
                    :teleported="false" class="global-search-select-area">
                    <el-option v-for="item in routeOptions" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
            </el-form-item>
            <el-form-item class="from-item" label="审核状态：" prop="isChecked">
                <el-select v-model="queryParams.isChecked" placeholder="请选择审核状态" placement="right-end"
                    :teleported="false" class="global-search-select-area">
                    <el-option v-for="item in statusOption" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
            </el-form-item>
            <el-form-item class="from-item" label="发车时间：" style="min-width: max-content">
                <el-date-picker v-model="dateRange" value-format="YYYY-MM-DD HH:mm:ss" type="datetimerange"
                    range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" placement="right"
                    :teleported="false"></el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button class="global-search-button" type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                <el-button class="global-search-button" icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
            <!-- <el-row justify="end">
                <el-form-item>
                    <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                    <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                </el-form-item>
            </el-row> -->
        </el-form>


        <!-- 新增按钮 -->
        <div class="global-func-btn">
            <el-button type="primary" icon="Plus" @click="handleAdd">新增</el-button>
        </div>

        <!-- 表格数据 -->
        <div class="global-table-container">
            <el-table class="global-border-radius-table" algin="center" v-loading="loading" :data="transportList">
                <!-- <el-table-column type="index" width="50" /> -->
                <el-table-column label="磅单号" prop="weightBillNo" min-width="200" :show-overflow-tooltip="true" />
                <el-table-column label="线路名称" prop="routeName" min-width="150" :show-overflow-tooltip="true" />
                <el-table-column label="货物" prop="cargo" min-width="150" :show-overflow-tooltip="true" />
                <el-table-column label="车牌号" prop="plateNo" min-width="150" :show-overflow-tooltip="true" />
                <el-table-column label="车辆来源" prop="vehicleSourceType" min-width="100" :show-overflow-tooltip="true">
                    <template #default="scope">
                        <el-tag class="vehicle-tag" v-if="scope.row.vehicleSourceType == 1">
                            自营车
                        </el-tag>
                        <el-tag class="vehicle-tag" v-else type="info">
                            外部车
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="司机" prop="driverName" min-width="150" :show-overflow-tooltip="true" />
                <el-table-column label="状态" prop="status" min-width="100" :show-overflow-tooltip="true">
                    <template #default="scope">
                        <el-tag class="vehicle-tag" v-if="scope.row.status == 3">
                            已发车
                        </el-tag>
                        <el-tag class="vehicle-tag" v-else type="success">
                            已到达
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="发车时间" prop="departureTime" min-width="180" :show-overflow-tooltip="true" />
                <el-table-column label="箱号" prop="containerNo" min-width="150" :show-overflow-tooltip="true" />
                <el-table-column label="磅单照片" prop="weightBillImgUrl" min-width="150">
                    <template #default="scope">
                        <el-image v-if="scope.row.weightBillImgUrl" :preview-src-list="[scope.row.weightBillImgUrl]" fit
                            style="width: 50px; height: 30px; border-radius: 4px" :src="scope.row.weightBillImgUrl"
                            hide-on-click-modal preview-teleported></el-image>
                        <el-image v-else fit lazy style="width: 60px; height: 40px; border-radius: 4px"
                            hide-on-click-modal>
                            <template #error>
                                <div class="image-slot">
                                    未上传
                                </div>
                            </template>
                        </el-image>
                    </template>
                </el-table-column>
                <el-table-column label="审核状态" prop="checked" min-width="100" :show-overflow-tooltip="true">
                    <template #default="scope">
                        <span class="is-check" v-if="scope.row.checked">
                            <el-icon class="icon">
                                <CircleCheckFilled />
                            </el-icon>
                            已审核
                        </span>
                        <span class="no-check" v-else>
                            <el-icon class="icon">
                                <RemoveFilled />
                            </el-icon>
                            未审核
                        </span>
                    </template>
                </el-table-column>
                <el-table-column label="审核人" prop="checkBy" min-width="100" :show-overflow-tooltip="true" />
                <el-table-column label="审核时间" prop="checkTime" min-width="180" :show-overflow-tooltip="true" />
                <el-table-column fixed="right" label="操作" class-name="small-padding" min-width="240">
                    <template #default="scope">
                        <el-button v-if="scope.row.checked == 0" link type="primary" icon="Edit"
                            @click="openDialog(scope.row, 'approval')">审核</el-button>
                        <el-button link type="primary" icon="View" @click="openDialog(scope.row, 'info')">详情</el-button>
                        <el-button v-if="scope.row.checked == 1" link type="primary" icon="Edit"
                            @click="openDialog(scope.row, 'edit')">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>

        </div>

        <!-- 审核/编辑/详情 对话框 -->
        <el-dialog :title="title" v-model="dialogVisiable" :width="`${dynamic.dialogWidth}`" append-to-body
            :close-on-press-escape="preview_image_mask ? false : true">
            <!-- 图片显示区域 -->
            <div :style="displayStatus" class="dy-dialog">
                <div class="demo-image__lazy" :style="backgroundStyle">
                    <el-image style="width: 100%;height: 100%; border-radius: 4px" :src="dialogPreviewUrl"
                        :preview-src-list="[dialogPreviewUrl]" hide-on-click-modal preview-teleported
                        @close="preview_image_mask = false" @show="preview_image_mask = true">
                        <template #error>
                            <div class="image-slot" style="font-size: 20px">
                                未上传
                            </div>
                        </template>
                    </el-image>
                </div>


                <!-- 审核表单区域 -->
                <div class="dy-form" v-if="title == '审核运单'">
                    <!-- 拉运信息 -->
                    <el-form class="form" :model="haulApprovalForm" :style="formStyle" label-width="120px">
                        <div class="trapezoid-box">
                            <TrapezoidTitle title="拉运信息"></TrapezoidTitle>
                        </div>
                        <el-form-item label="司机：" prop="driverName" class="form-items"
                            :style="`width: ${100 / formColumn}%`">
                            <span class="model-value" v-if="haulApprovalForm.driverName">{{ haulApprovalForm.driverName
                                }}</span>
                            <span class="model-value no-model-value" v-else>{{ '-' }}</span>
                        </el-form-item>
                        <el-form-item label="驾驶车辆：" prop="plateNo" class="form-items"
                            :style="`width: ${100 / formColumn}%`">
                            <span class="model-value" v-if="haulApprovalForm.plateNo">{{ haulApprovalForm.plateNo
                                }}</span>
                            <span class="model-value no-model-value" v-else>{{ '-' }}</span>
                        </el-form-item>
                        <el-form-item label="线路：" prop="routeName" class="form-items"
                            :style="`width: ${100 / formColumn}%`">
                            <span class="model-value" v-if="haulApprovalForm.routeName">{{ haulApprovalForm.routeName
                                }}</span>
                            <span class="model-value no-model-value" v-else>{{ '-' }}</span>
                        </el-form-item>
                        <el-form-item label="货物：" prop="cargo" class="form-items"
                            :style="`width: ${100 / formColumn}%`">
                            <span class="model-value" v-if="haulApprovalForm.cargo">{{ haulApprovalForm.cargo }}</span>
                            <span class="model-value no-model-value" v-else>{{ '-' }}</span>
                        </el-form-item>
                        <el-form-item label="发车时间：" prop="departureTime" class="form-items"
                            :style="`width: ${100 / formColumn}%`">
                            <span class="model-value" v-if="haulApprovalForm.departureTime">{{
                                haulApprovalForm.departureTime
                                }}</span>
                            <span class="model-value no-model-value" v-else>{{ '-' }}</span>
                        </el-form-item>
                        <el-form-item label="到达时间：" prop="arrivalTime" class="form-items"
                            :style="`width: ${100 / formColumn}%`">
                            <span class="model-value" v-if="haulApprovalForm.arrivalTime">{{
                                haulApprovalForm.arrivalTime
                                }}</span>
                            <span class="model-value no-model-value" v-else>{{ '-' }}</span>
                        </el-form-item>
                    </el-form>

                    <!-- 磅单信息 -->
                    <el-form class="form" :model="billApprovalForm" :rules="billApprovalRules" ref="formApprovalRef"
                        :style="formStyle" label-width="100px" :disabled="disabled_of_weight">
                        <div class="trapezoid-box">
                            <TrapezoidTitle title="磅单信息"></TrapezoidTitle>
                        </div>
                        <el-form-item label="车牌号：" prop="plateNo" class="form-items"
                            :style="`width: ${100 / formColumn}%`">
                            <el-input v-noSpace v-model="billApprovalForm.plateNo" class="form-input"
                                placeholder="请输入车牌号" clearable></el-input>
                        </el-form-item>
                        <el-form-item label="净重：" prop="netWeight" class="form-items"
                            :style="`width: ${100 / formColumn}%`">
                            <el-input v-noSpace v-model="billApprovalForm.netWeight" class="form-input"
                                placeholder="请输入净重" clearable>
                                <template #append>吨</template></el-input>
                        </el-form-item>
                        <el-form-item label="磅单号：" prop="billNo" class="form-items"
                            :style="`width: ${100 / formColumn}%`">
                            <el-input v-noSpace v-model="billApprovalForm.billNo" class="form-input"
                                placeholder="请输入磅单号" clearable></el-input>
                        </el-form-item>
                        <el-form-item label="箱号：" prop="containerNo" class="form-items"
                            :style="`width: ${100 / formColumn}%`">
                            <el-input v-noSpace v-model="billApprovalForm.containerNo" class="form-input"
                                placeholder="请输入箱号" clearable></el-input>
                        </el-form-item>
                        <el-form-item label="备注：" prop="checkNotes" class="form-items" style="width: 100%">
                            <el-input v-model="billApprovalForm.checkNotes" type="textarea"
                                :autosize="{ minRows: 2, maxRows: 5 }" placeholder="请输入备注" maxlength="200"
                                show-word-limit clearable>
                            </el-input>
                        </el-form-item>
                    </el-form>

                    <div class="dy-footer">
                        <el-button type="primary" @click="submitForm">确 定</el-button>
                        <el-button @click="cancel">取 消</el-button>
                    </div>
                </div>

                <!-- 详情表单区域 -->
                <div class="dy-form" v-if="title == '查看运单'">
                    <el-form class="form" :style="formStyle" label-width="100px">
                        <el-form-item label="车牌号：" prop="plateNo" class="form-items"
                            :style="`width: ${100 / formColumn}%`">
                            <span class="model-value" v-if="formView.plateNo">{{ formView.plateNo
                                }}</span>
                            <span class="model-value no-model-value" v-else>{{ '-' }}</span>
                        </el-form-item>
                        <el-form-item label="司机：" prop="driverName" class="form-items"
                            :style="`width: ${100 / formColumn}%`">
                            <span class="model-value" v-if="formView.driverName">{{ formView.driverName
                                }}</span>
                            <span class="model-value no-model-value" v-else>{{ '-' }}</span>
                        </el-form-item>
                        <el-form-item label="线路：" prop="routeName" class="form-items"
                            :style="`width: ${100 / formColumn}%`">
                            <span class="model-value" v-if="formView.routeName">{{ formView.routeName
                                }}</span>
                            <span class="model-value no-model-value" v-else>{{ '-' }}</span>
                        </el-form-item>
                        <el-form-item label="货物：" prop="cargo" class="form-items"
                            :style="`width: ${100 / formColumn}%`">
                            <span class="model-value" v-if="formView.cargo">{{ formView.cargo }}</span>
                            <span class="model-value no-model-value" v-else>{{ '-' }}</span>
                        </el-form-item>
                        <el-form-item label="发车时间：" prop="departureTime" class="form-items"
                            :style="`width: ${100 / formColumn}%`">
                            <span class="model-value" v-if="formView.departureTime">{{
                                formView.departureTime
                                }}</span>
                            <span class="model-value no-model-value" v-else>{{ '-' }}</span>
                        </el-form-item>
                        <el-form-item label="到达时间：" prop="arrivalTime" class="form-items"
                            :style="`width: ${100 / formColumn}%`">
                            <span class="model-value" v-if="formView.arrivalTime">{{
                                formView.arrivalTime
                                }}</span>
                            <span class="model-value no-model-value" v-else>{{ '-' }}</span>
                        </el-form-item>
                        <el-form-item label="磅单号：" prop="weightBillNo" class="form-items"
                            :style="`width: ${100 / formColumn}%`">
                            <span class="model-value" v-if="formView.weightBillNo">{{
                                formView.weightBillNo
                                }}</span>
                            <span class="model-value no-model-value" v-else>{{ '-' }}</span>
                        </el-form-item>
                        <el-form-item label="净重：" prop="netWeight" class="form-items"
                            :style="`width: ${100 / formColumn}%`">
                            <span class="model-value" v-if="formView.netWeight">{{ formView.netWeight + '吨'
                                }}</span>
                            <span class="model-value no-model-value" v-else>{{ '-' }}</span>
                        </el-form-item>
                        <el-form-item label="箱号：" prop="containerNo" class="form-items"
                            :style="`width: ${100 / formColumn}%`">
                            <span class="model-value" v-if="formView.containerNo">{{
                                formView.containerNo
                                }}</span>
                            <span class="model-value no-model-value" v-else>{{ '-' }}</span>
                        </el-form-item>
                        <el-form-item label="审核状态：" prop="checked" class="form-items"
                            :style="`width: ${100 / formColumn}%`">
                            <span class="model-value" v-if="formView.checked === 1">{{ '已审核'
                                }}</span>
                            <span class="model-value no-model-value" v-else>{{ '未审核' }}</span>
                        </el-form-item>
                        <el-form-item label="审核人：" prop="checkNotes" class="form-items"
                            :style="`width: ${100 / formColumn}%`">
                            <span class="model-value" v-if="formView.checkBy">{{ formView.checkBy
                                }}</span>
                            <span class="model-value no-model-value" v-else>{{ '-' }}</span>
                        </el-form-item>
                        <el-form-item label="审核时间：" prop="checkTime" class="form-items"
                            :style="`width: ${100 / formColumn}%`">
                            <span class="model-value" v-if="formView.checkTime">{{ formView.checkTime
                                }}</span>
                            <span class="model-value no-model-value" v-else>{{ '-' }}</span>
                        </el-form-item>
                        <el-form-item label="备注：" prop="checkNotes" class="form-items" style="width: 100%">
                            <span class="model-value model-remark" v-if="formView.checkNotes">{{ formView.checkNotes
                                }}</span>
                            <span class="model-value no-model-value" v-else>{{ '-' }}</span>
                        </el-form-item>
                    </el-form>
                </div>

                <!-- 编辑表单区域 -->
                <div class="dy-form" v-if="title == '编辑运单'">
                    <!-- 提示 -->
                    <el-form-item v-if="formEdit.railwayAssociated == 1" class="global-tip-container"
                        style="width: 100%;">
                        <div class="global-tip">
                            <span class="tip-icon"><svg-icon icon-class="light-tip" /></span>
                            <div class="tip-content">
                                <p>当前运单已完成铁路数据匹配，无法修改箱号以及时间信息</p>
                            </div>
                        </div>
                    </el-form-item>
                    <el-form class="form" :model="formEdit" ref="formEditRef" :rules="formEditRules" :style="formStyle"
                        label-width="100px">
                        <el-form-item label="车牌号：" prop="plateNo" class="form-items"
                            :style="`width: ${100 / formColumn}%`">
                            <el-input v-model="formEdit.plateNo" class="form-input" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="司机：" prop="driverName" class="form-items"
                            :style="`width: ${100 / formColumn}%`">
                            <el-input v-model="formEdit.driverName" class="form-input" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="线路：" prop="routeName" class="form-items"
                            :style="`width: ${100 / formColumn}%`">
                            <el-input v-model="formEdit.routeName" class="form-input" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="货物：" prop="cargo" class="form-items"
                            :style="`width: ${100 / formColumn}%`">
                            <el-input v-model="formEdit.cargo" class="form-input" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="发车时间：" prop="departureTime" class="form-items"
                            :style="`width: ${100 / formColumn}%`">
                            <el-date-picker v-model="formEdit.departureTime" value-format="YYYY-MM-DD HH:mm:ss"
                                type="datetime" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
                                teleported style="width: 100%"
                                :disabled="formEdit.railwayAssociated == 1 ? true : false"></el-date-picker>
                        </el-form-item>
                        <el-form-item label="到达时间：" prop="arrivalTime" class="form-items"
                            :style="`width: ${100 / formColumn}%`">
                            <el-date-picker v-model="formEdit.arrivalTime" value-format="YYYY-MM-DD HH:mm:ss"
                                type="datetime" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
                                teleported style="width: 100%"
                                :disabled="formEdit.railwayAssociated == 1 ? true : false"></el-date-picker>
                        </el-form-item>
                        <el-form-item label="审核状态：" prop="checked" class="form-items"
                            :style="`width: ${100 / formColumn}%`">
                            <el-input v-model="formEdit.checked" :value="formEdit.checked == 0 ? '未审核' : '已审核'"
                                class="form-input" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="磅单号：" prop="billNo" class="form-items"
                            :style="`width: ${100 / formColumn}%`">
                            <el-input v-noSpace v-model="formEdit.billNo" class="form-input" placeholder="请输入磅单号"
                                clearable></el-input>
                        </el-form-item>
                        <el-form-item label="净重：" prop="netWeight" class="form-items"
                            :style="`width: ${100 / formColumn}%`">
                            <el-input v-noSpace v-model="formEdit.netWeight" class="form-input" placeholder="请输入净重"
                                clearable>
                                <template #append>吨</template></el-input>
                        </el-form-item>
                        <el-form-item label="箱号：" prop="containerNo" class="form-items"
                            :style="`width: ${100 / formColumn}%`">
                            <el-input v-noSpace v-model="formEdit.containerNo" class="form-input" placeholder="请输入箱号"
                                clearable :disabled="formEdit.railwayAssociated == 1 ? true : false"></el-input>
                        </el-form-item>
                        <el-form-item label="备注：" prop="checkNotes" class="form-items" style="width: 100%">
                            <el-input v-if="formEdit.checkNotes" v-model="formEdit.checkNotes" type="textarea"
                                :autosize="{ minRows: 2, maxRows: 7 }" placeholder="请输入备注" maxlength="200"
                                show-word-limit clearable>
                            </el-input>
                            <el-input v-else v-model="formEdit.checkNotes" type="textarea"
                                :autosize="{ minRows: 2, maxRows: 7 }" placeholder="请输入备注" maxlength="200"
                                show-word-limit clearable>
                            </el-input>
                        </el-form-item>
                    </el-form>
                    <div class="dy-footer">
                        <el-button type="primary" @click="submitForm">确 定</el-button>
                        <el-button @click="cancel">取 消</el-button>
                    </div>
                </div>
            </div>
        </el-dialog>


        <!-- 新增表单弹窗 -->
        <el-dialog title="新增拉运记录" v-model="dialogVisiable_add" :width="900" append-to-body
            :close-on-press-escape="showImagePreview ? false : true">
            <!-- 拉运信息 -->
            <div v-loading="upload_view_billImg">
                <el-form class="global-form-edit" :model="billAddForm" ref="billAddFormRef" label-width="120px"
                    :rules="billAddFormRules">
                    <div class="trapezoid-box">
                        <TrapezoidTitle title="拉运信息"></TrapezoidTitle>
                    </div>
                    <el-form-item label="司机：" prop="driverId" class="form-items" style="width: 50%;">
                        <el-select class="global-ipt-tag" v-model="billAddForm.driverId" placeholder="请选择司机" filterable
                            :teleported="false" style="width: 100%;" clearable>
                            <template #prefix>
                                <span v-if="billAddForm.driverId">
                                    <el-tag v-if="getTagName(billAddForm.driverId, 'driver') == 1">自有司机</el-tag>
                                    <el-tag v-else type="info">外协司机</el-tag>
                                </span>
                            </template>
                            <el-option v-for="item in driverOption" :key="item.id" :label="item.name" :value="item.id">
                                <div class="global-justify-between">
                                    <span class="label">{{ item.name }}</span>
                                    <span class="tag">
                                        <el-tag v-if="item.sourceType == '1'" size="small">自有司机</el-tag>
                                        <el-tag v-else type="info" size="small">外协司机</el-tag>
                                    </span>
                                </div>
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="车辆：" prop="vehicleId" class="form-items" style="width:50%;">
                        <el-select class="global-ipt-tag" v-model="billAddForm.vehicleId" placeholder="请选择车辆" filterable
                            :teleported="false" style="width: 100%;" clearable>
                            <template #prefix>
                                <span v-if="billAddForm.vehicleId">
                                    <el-tag v-if="getTagName(billAddForm.vehicleId, 'vehicle') == 1">自营车</el-tag>
                                    <el-tag v-else type="info">外部车</el-tag>
                                </span>
                            </template>
                            <el-option v-for="item in vehicleOption" :key="item.id" :label="item.plateNo"
                                :value="item.id">
                                <div class="global-justify-between">
                                    <span class="label">{{ item.plateNo }}</span>
                                    <span class="tag">
                                        <el-tag v-if="item.sourceType == '1'" size="small">自营车</el-tag>
                                        <el-tag v-else type="info" size="small">外部车</el-tag>
                                    </span>
                                </div>
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="线路：" prop="routeId" class="form-items" style="width: 100%;">
                        <el-select v-model="billAddForm.routeId" placeholder="请选择线路" filterable :teleported="false"
                            style="width: calc(50% - 60px);" clearable>
                            <el-option v-for="item in routeOption" :key="item.id" :label="item.name" :value="item.id" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="发车时间：" prop="departureTime" class="form-items">
                        <el-date-picker v-model="billAddForm.departureTime" value-format="YYYY-MM-DD HH:mm:ss"
                            type="datetime" teleported placeholder="请选择发车时间" style="width: 100%"></el-date-picker>
                    </el-form-item>
                    <el-form-item label="到达时间：" prop="arrivalTime" class="form-items">
                        <el-date-picker v-model="billAddForm.arrivalTime" value-format="YYYY-MM-DD HH:mm:ss"
                            type="datetime" placeholder="请选择到达时间" teleported style="width: 100%"></el-date-picker>
                    </el-form-item>
                    <div class="trapezoid-box" style="width: 100%;">
                        <TrapezoidTitle title="磅单信息"></TrapezoidTitle>
                    </div>
                    <el-form-item class="form-items global-tip-container" style="width: 50%;" required>
                        <template #label>
                            <span>磅单图片：</span>
                        </template>
                        <template #default>
                            <div class="global-tip">
                                <span class="tip-icon"><svg-icon icon-class="light-tip" /></span>
                                <div class="tip-content">
                                    <p>1. 保证图片完整，内容清晰可见</p>
                                    <p>2. 支持png、jpg、jpeg格式，大小1M以内</p>
                                </div>
                            </div>
                        </template>
                    </el-form-item>
                    <el-form-item prop="weightBillImgUrl" class="form-items upload-image" style="width: 100%;">
                        <div v-if="file_url" class="file-container">
                            <div class="file-image">
                                <img :src="file_url" class="el-upload-list__item-thumbnail" alt="">
                            </div>
                            <div class="mask-containter">
                                <span class="preview">
                                    <el-icon :size="20" @click="viewImage(item)">
                                        <View />
                                    </el-icon>
                                </span>
                                <span class="delete" @click="handleDelete(item, index)">
                                    <el-icon :size="20">
                                        <Delete />
                                    </el-icon>
                                </span>
                            </div>
                        </div>
                        <!-- <div v-if="!billAddForm.routeId" class="upload-demo-disabled" @click="uploadMessage()">
                            <el-icon :size="40">
                                <Plus />
                            </el-icon>
                        </div> -->
                        <!-- file_url == '' && billAddForm.routeId -->
                        <el-upload v-if="file_url == ''" class="upload-demo" accept=".png,.jpg,.jpeg"
                            :on-change="handleChange" :auto-upload="false" :multiple="false">
                            <div class="add-attachment">
                                <el-icon :size="40">
                                    <Plus />
                                </el-icon>
                            </div>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="磅单号：" prop="weightBillNo" class="form-items">
                        <el-input v-noSpace v-model="billAddForm.weightBillNo" class="form-input" placeholder="请输入磅单号"
                            clearable></el-input>
                    </el-form-item>
                    <el-form-item label="箱号：" prop="containerNo" class="form-items">
                        <el-input v-noSpace v-model="billAddForm.containerNo" class="form-input" placeholder="请输入箱号"
                            clearable></el-input>
                    </el-form-item>
                    <el-form-item label="净重：" prop="netWeight" class="form-items">
                        <el-input v-noSpace v-model="billAddForm.netWeight" class="form-input" placeholder="请输入净重"
                            clearable>
                            <template #append>吨</template></el-input>
                    </el-form-item>
                    <el-form-item label="备注：" prop="checkNotes" class="form-items" style="width: 100%">
                        <el-input v-model="billAddForm.checkNotes" type="textarea"
                            :autosize="{ minRows: 2, maxRows: 5 }" placeholder="请输入备注" maxlength="200" show-word-limit
                            clearable>
                        </el-input>
                    </el-form-item>
                </el-form>
                <div class="dialog-footer" style="margin-top: 2px;text-align: right;">
                    <el-button type="primary" @click="submitFormAdd">确 定</el-button>
                    <el-button @click="cancelAdd">取 消</el-button>
                </div>
            </div>
        </el-dialog>


        <!-- <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageIndex"
            v-model:limit="queryParams.pageSize" @pagination="getList" /> -->

        <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageIndex"
            v-model:limit="queryParams.pageSize" :pageSizes="[15, 20, 30, 50]" @pagination="getList" />


        <el-image-viewer v-if="showImagePreview" @close="closePreview" :url-list="[file_url]" hide-on-click-modal
            preview-teleported />
    </div>
</template>

<script setup name="transportOrderList">
import { v4 as uuidv4 } from 'uuid';
import { ElMessage } from 'element-plus'
import { listTransPortApi, transportInfoApi, getWeightbillInfoApi, checkHaulApi, updateHaulApi, viewWeightBillApi, addHaulApi } from "@/api/transportOrderManagement/transportOrderList";
import { ref, reactive, toRefs, computed, getCurrentInstance } from 'vue';
import { getRouteSimpleListApi, getDriverSimpleListApi, getVehicleSimpleListApi } from "@/api/common";
const router = useRouter();
const { proxy } = getCurrentInstance();
let preview_image_mask = ref(false)
let upload_view_billImg = ref(false) // 识别磅单loading
let loading_page = ref(false)
let dialogVisiable = ref(false);
let dialogVisiable_add = ref(false)
let showImagePreview = ref(false)
let loading = ref(true);
let showSearch = ref(true);
let total = ref(0);
let title = ref("");
let dateRange = ref([]);
let transportList = ref([]) // 发端短驳
let routeOptions = ref([])  // 线路下拉列表(全部)
let routeOption = ref([])  // 线路下拉列表
let driverOption = ref([])
let vehicleOption = ref([])
let current_file = ref({})
let fileList = ref([])
let file_url = ref('')
let disabled_of_weight = ref(false) // 没有磅单禁用榜单信息表单
/** 审核状态下拉列表 */
const statusOption = ref([
    { id: 'all', name: '全部' },
    { id: 0, name: '未审核' },
    { id: 1, name: '已审核' }
])
/** 审核、详情、编辑对话框图片 */
let dialogPreviewUrl = ref('');
/** 审核、详情、编辑对话框图片背景展示状态样式 */
let backgroundStyle = computed(() => {
    return {
        width: dynamic.dynamicWidth == 0 ? '100%' : dynamic.dynamicWidth + 'px', // 根据需要设置宽度
        height: dynamic.dynamicHeight + 'px', // 根据需要设置高度
    };
})
/** 审核、详情、编辑对话框动态背景 */
let dynamic = reactive({
    dialogWidth: 1000,
    dynamicBack: '',
    dynamicWidth: 0,
    dynamicHeight: 0
})
/** 审核、详情、编辑对话框展示样式 */
let displayStatus = reactive({
    display: 'flex',
    flexDirection: '',
})
/** 审核、详情、编辑对话框表单的展示样式 */
let formStyle = reactive({
    display: 'flex',
    flexWrap: 'wrap',
    height: 'max-content',
    width: '',
})
/** 审核、详情、编辑对话框表单的展示列数 */
let formColumn = ref(0)
/** 列表查询参数 */
const data = reactive({
    billAddForm: {},
    formView: {},
    formEdit: {},
    haulApprovalForm: {},
    billApprovalForm: {},
    queryParams: {
        pageIndex: 1,
        pageSize: 15,
        routeId: 'all',
        isChecked: 'all'
    },
    billApprovalRules: {
        plateNo: [{ required: true, message: "车牌号不能为空", trigger: "blur" }],
        netWeight: [
            { required: true, message: "净重不能为空", trigger: "blur" },
            { pattern: /^(?!0(\.0+)?$)\d+(\.\d+)?$/, message: '仅允许输入大于0的小数和整数', trigger: 'blur' },
            { pattern: /^(?!0\d)(\d+(\.\d*)?|\.\d+)$/, message: '输入内容不合法', trigger: 'blur' },
        ],
        billNo: [{ required: true, message: "磅单号不能为空", trigger: "blur" }],
        containerNo: [
            { required: true, message: "箱号不能为空", trigger: "blur" },
            // { max: 11, message: "箱号不能超过11位", trigger: "blur" }
        ]
    },
    billAddFormRules: {
        driverId: [{ required: true, message: "司机不能为空", trigger: "change" }],
        routeId: [{ required: true, message: "线路不能为空", trigger: "change" }],
        vehicleId: [{ required: true, message: "车辆不能为空", trigger: "change" }],
        departureTime: [{ required: true, message: "发车时间不能为空", trigger: "change" }],
        arrivalTime: [{ required: true, message: "到达时间不能为空", trigger: "change" }],
        plateNo: [{ required: true, message: "车辆不能为空", trigger: "change" }],
        weightBillImgUrl: [{ required: true, message: "", trigger: "change" }],
        netWeight: [
            { required: true, message: "净重不能为空", trigger: "blur" },
            { pattern: /^(?!0(\.0+)?$)\d+(\.\d+)?$/, message: '仅允许输入大于0的小数和整数', trigger: 'blur' },
            { pattern: /^(?!0\d)(\d+(\.\d*)?|\.\d+)$/, message: '输入内容不合法', trigger: 'blur' },
        ],
        weightBillNo: [{ required: true, message: "磅单号不能为空", trigger: "blur" }],
        containerNo: [
            { required: true, message: "箱号不能为空", trigger: "blur" },
            // { max: 11, message: "箱号不能超过11位", trigger: "blur" }
        ]
    },
    formEditRules: {
        departureTime: [{ required: true, message: "发车时间不能为空", trigger: "change" }],
        arrivalTime: [{ required: true, message: "到达时间不能为空", trigger: "change" }],
        netWeight: [
            { required: true, message: "净重不能为空", trigger: "blur" },
            { pattern: /^(?!0(\.0+)?$)\d+(\.\d+)?$/, message: '仅允许输入大于0的小数和整数', trigger: 'blur' },
            { pattern: /^(?!0\d)(\d+(\.\d*)?|\.\d+)$/, message: '输入内容不合法', trigger: 'blur' },
        ],
        billNo: [{ required: true, message: "磅单号不能为空", trigger: "blur" }],
        containerNo: [
            { required: true, message: "箱号不能为空", trigger: "blur" },
            // { max: 11, message: "箱号不能超过11位", trigger: "blur" }
        ]
    }
});
const { queryParams, billAddFormRules, billApprovalRules, formEditRules, haulApprovalForm, billApprovalForm, billAddForm, formView, formEdit } = toRefs(data);
/** 
 * Methods
 */
/** 查询发端短驳 */
function getList() {
    loading.value = true;
    const { routeId, isChecked, ...rest } = queryParams.value
    let params = rest
    isChecked != 'all' ? params["isChecked"] = isChecked : null
    routeId != 'all' ? params["routeId"] = routeId : null
    listTransPortApi(proxy.addDateRange(params, dateRange.value)).then(response => {
        transportList.value = response.data.records;
        total.value = Number(response.data.total);
        loading.value = false;
    }).catch(err => {
        loading.value = false;
    })
}

/** 查询运单详情 */
async function transportInfo(id) {
    await transportInfoApi(id).then(response => {
        if (response.code === 1) {
            if (title.value == '查看运单') {
                formView.value = response.data
            } else {
                formEdit.value = response.data
                formEdit.value.billNo = response.data.weightBillNo
                formEdit.value.haulId = response.data.id
                delete formEdit.value.weightBillNo
            }
        } else {
            ElMessage({ message: response.message, type: 'error' })
        }
    }).catch(err => {
    })
}

/** 线路下拉列表 */
function getRouteSimpleList() {
    getRouteSimpleListApi().then(response => {
        if (response.code === 1) {
            routeOption.value = response.data.map((item) => item)
            routeOptions.value = response.data
            routeOptions.value.unshift({ name: '全部', id: 'all' })
        } else {
            ElMessage({ message: response.message, type: 'error' })
        }
    }).catch(err => {
    })
}

/** 司机下拉列表 */
function getDriverSimpleList() {
    getDriverSimpleListApi().then(response => {
        if (response.code === 1) {
            driverOption.value = response.data.map((item) => item)
        } else {
            ElMessage({ message: response.message, type: 'error' })
        }
    }).catch(err => {
    })
}

/** 车辆下拉列表 */
function getVehicleSimpleList() {
    getVehicleSimpleListApi().then(response => {
        if (response.code === 1) {
            vehicleOption.value = response.data.map((item) => item)
        } else {
            ElMessage({ message: response.message, type: 'error' })
        }
    }).catch(err => {
    })
}

/** 判断当前车辆及线路类型 */
function getTagName(id, type) {
    if (type == 'driver') {
        let obj = driverOption.value.find(item => item.id == id)
        return obj?.sourceType
    } else {
        let obj = vehicleOption.value.find(item => item.id == id)
        return obj?.sourceType
    }
}

/** 获取审核、详情、编辑对话框动态内容 */
async function getFormData(row, type) {
    if (type == 'approval') {
        title.value = "审核运单"
        haulApprovalForm.value = row
        // 获取磅单信息
        await getWeightbillInfo(row.id)
    } else if (type == 'info') {
        title.value = "查看运单";
        await transportInfo(row.id)
    } else {
        title.value = "编辑运单";
        await transportInfo(row.id)
    }
}

/** 查询磅单信息详情接口--审核 */
async function getWeightbillInfo(id) {
    await getWeightbillInfoApi(id).then((response) => {
        const res = { haulId: id, imageUrl: dialogPreviewUrl.value }
        billApprovalForm.value = res
        if (response.code === 1) {
            billApprovalForm.value = Object.assign(res, response.data)
        } else {
            ElMessage({ message: response.message, type: 'error' })
        }
    }).catch(err => {
    })
}

/** 未上传线路 */
// function uploadMessage() {
//     ElMessage({ message: '请选择线路后上传磅单图片', type: 'error', duration: 2000 })
// }

/** 磅单文件状态变化 */
async function handleChange(file, fileList) {
    current_file.value = file.raw || file.file
    // 获取最新的文件
    const latestFile = file.raw || file.file;
    // 将最新的文件加入到fileList中
    fileList.value = [latestFile];
    /** 支持文件类型 */
    let supposeType = ['jpg', 'png', 'jpeg']
    /** 获取文件后缀名 */
    if (supposeType.includes(getExtension(current_file.value.name))) {
        // let base64_file = await fileToBase64(current_file.value)
        // console.log(base64_file);
        // file_url.value = base64_file
        viewWeightBill()
    } else {
        ElMessage({ message: '文件类型暂不支持，请重新上传', type: 'error', duration: 2000 })
    }
}

/** 删除磅单图片 */
function handleDelete() {
    file_url.value = ''
    current_file.value = {}
    fileList.value = []
    // 清空已经识别的数据（不需要全部清空，只清空页面展示的即可）
    billAddForm.value.weightBillImgUrl = undefined
    billAddForm.value.netWeight = undefined
    billAddForm.value.weightBillNo = undefined
    billAddForm.value.containerNo = undefined
}

/** 识别磅单照片 */
function viewWeightBill() {
    upload_view_billImg.value = true
    let formData = new FormData();
    formData.append("file", current_file.value);
    // 接口中返回了一个线路id,目前是null
    // formData.append('routeId', billAddForm.value.routeId);
    viewWeightBillApi(formData).then(response => {
        if (response.code === 1) {
            delete response.data.weightBillInfo.routeId
            billAddForm.value = Object.assign(billAddForm.value, response.data.weightBillInfo, { recognitionId: response.data.recognitionId })
            upload_view_billImg.value = false
            /** 识别成功 */
            file_url.value = response.data.weightBillInfo.weightBillImgUrl
            proxy.$refs["billAddFormRef"].clearValidate(['weightBillImgUrl', 'netWeight', 'weightBillNo', 'containerNo'])
        } else {
            upload_view_billImg.value = false
            ElMessage({ message: response.message, type: 'error' })
        }
    }).catch(err => {
        upload_view_billImg.value = false
    })
}

/** File转Base64 */
// async function fileToBase64(file) {
//     return new Promise((resolve, reject) => {
//         const reader = new FileReader();
//         reader.onload = function (event) {
//             resolve(event.target.result);
//         };
//         reader.readAsDataURL(file);
//         reader.onerror = reject;
//     });
// }

/** 获取文件后缀名 */
function getExtension(filename) {
    if (filename) {
        return filename.slice((filename.lastIndexOf(".") - 1 >>> 0) + 2).toLowerCase();
    }
}

/** 预览图片 */
async function viewImage() {
    showImagePreview.value = true
}

function closePreview() {
    showImagePreview.value = false
}

/** 提交新增表单接口 */
function submitFormAdd() {
    proxy.$refs["billAddFormRef"].validate(valid => {
        if (valid) {
            addHaul()
        }
    })
}

/** 新增发端拉运 */
function addHaul() {
    loading_page.value = true
    // 创建uuid和billNo
    let uuid = generateUUID()
    let params = Object.assign(billAddForm.value, { billNo: billAddForm.value.weightBillNo, bizSeq: uuid })
    addHaulApi(params).then(response => {
        if (response.code === 1) {
            loading_page.value = false
            dialogVisiable_add.value = false
            ElMessage({ message: response.message, type: 'success' })
            // 手动添加方法
            updateTableAdd(response.data)
        } else {
            loading_page.value = false
            ElMessage({ message: response.message, type: 'error' })
        }
    }).catch(err => {
        loading_page.value = false
    })
}

/** 手动添加 */
function updateTableAdd(row) {
    // 当前页面处于第一页
    if (queryParams.value.pageIndex = 1) {
        if (transportList.value.length < queryParams.value.pageSize) {
            transportList.value.unshift(row)
        } else {
            transportList.value.shift()
            transportList.value.unshift(row)
        }
    } else {
        handleQuery()
    }
}

/** 生成uuid */
function generateUUID() {
    let uuid = uuidv4(); // 生成标准长度的UUID
    return uuid.replace(/-/g, '').substring(0, 32); // 去除破折号并截取前30位
}

/** 提交表单 */
function submitForm() {
    if (dialogPreviewUrl.value) {
        if (title.value == '审核运单') {
            proxy.$refs["formApprovalRef"].validate(valid => {
                if (valid) {
                    checkHaul()
                }
            })
        } else if (title.value == '编辑运单') {
            proxy.$refs["formEditRef"].validate(valid => {
                if (valid) {
                    updateHaul()
                }
            })
        }
    } else {
        if (title.value == '审核运单') {
            checkHaul()
        } else {
            ElMessage({ message: '未上传磅单!', type: 'error' })
        }
    }
}


/** 提交审核磅单信息表单 */
function checkHaul() {
    checkHaulApi(billApprovalForm.value).then(response => {
        if (response.code === 1) {
            let { checked, weightBillNo, netWeight, id, containerNo, checkTime, checkBy } = response.data
            let newObject = { checked, weightBillNo, netWeight, id, containerNo, checkTime, checkBy };
            updateTableRowData(newObject)
            dialogVisiable.value = false
            ElMessage({ message: '审核成功', type: 'success' })
        } else {
            ElMessage({ message: response.message, type: 'error' })
        }
    }).catch(err => {
    })
}

/** 提交编辑磅单信息表单 */
function updateHaul() {
    updateHaulApi(formEdit.value).then(response => {
        if (response.code === 1) {
            let { weightBillNo, netWeight, id, containerNo, departureTime, arrivalTime } = response.data
            let newObject = { weightBillNo, netWeight, id, containerNo, departureTime, arrivalTime };
            updateTableRowData(newObject)
            dialogVisiable.value = false
            ElMessage({ message: '操作成功', type: 'success' })
        } else {
            ElMessage({ message: response.message, type: 'error' })
        }
    }).catch(err => {
    })
}

/** 手动更新表格中某行的数据 */
function updateTableRowData(params) {
    transportList.value = transportList.value.map(item => {
        if (item.id.toString() == params.id.toString()) {
            item = Object.assign(item, params)
        }
        return item
    });
}

/** 处理图片回显dialog动态样式 */
async function getDyStyle(row) {
    getImageSize(`${row.weightBillImgUrl}`, function (size) {
        if (size) {
            const { width, height } = size
            const ImageH = Number(height)
            const ImageW = Number(width)
            getCalcSize(ImageW, ImageH)
            getUnitByColumn(ImageW, ImageH)
        } else {
            const ImageH = Number(1024)
            const ImageW = Number(768)
            getCalcSize(ImageW, ImageH)
            getUnitByColumn(ImageW, ImageH)
        }
    });
}

/** 获取图片尺寸 */
function getImageSize(url, callback) {
    var img = new Image();
    console.log(img, '对象');
    img.onload = function () {
        callback({ width: img.width, height: img.height });
    };
    img.onerror = function () {
        callback(null);
    };
    img.src = url;
}

/** 对话框每列展示formItem个数 */
function getUnitByColumn(w, h) {
    const dynamicW = dynamic.dialogWidth - 60
    if (w > h) {
        formColumn.value = 3
        formStyle.width = dynamicW + 'px'
    } else {
        formColumn.value = 2
        formStyle.width = dynamicW / 2 + 'px'
    }
}

/** 根据图片的的宽度或高度,计算图片的高度或宽度,减去dialog中的40像素padding */
function getCalcSize(w, h) {
    const dynamicW = dynamic.dialogWidth - 60
    if (w > h) {
        displayStatus.flexDirection = 'column ',
            dynamic.dynamicWidth = dynamicW
    } else {
        displayStatus.flexDirection = 'row',
            dynamic.dynamicWidth = dynamicW / 2.8
    }
    dynamic.dynamicHeight = dynamic.dynamicWidth * (h / w)
}

/** 搜索按钮操作 */
function handleQuery() {
    queryParams.value.pageIndex = 1;
    getList();
}

/** 重置按钮操作 */
function resetQuery() {
    dateRange.value = [];
    queryParams.value.routeId = 'all'
    queryParams.value.isChecked = 'all'
    proxy.resetForm("queryRef");
    handleQuery();
}

/** 打开新增弹窗 */
function handleAdd() {
    resetAdd()
    dialogVisiable_add.value = true
}

/** 打开审核、详情、编辑对话框 */
async function openDialog(row, type) {
    // 打开时重置表单
    reset()
    await getFormData(row, type)
    await getDyStyle(row)
    dialogPreviewUrl.value = row.weightBillImgUrl
    if (type == 'approval' && row.weightBillImgUrl == '') {
        disabled_of_weight.value = true
        billApprovalForm.value.hasWeightBill = 0
    }
    dialogVisiable.value = true
};

/** 取消按钮 */
function cancel() {
    dialogVisiable.value = false;
    reset();
}

/** 取消新增 */
function cancelAdd() {
    dialogVisiable_add.value = false;
    resetAdd();
}

/** 重置数据以及表单校验规则  */
async function reset() {
    disabled_of_weight.value = false // 打开前重置磅单信息表单禁用变量
    billApprovalForm.value = {
        hasWeightBill: 1,
        haulId: undefined,
        plateNo: undefined,
        driverName: undefined,
        routeName: undefined,
        cargo: undefined,
        departureTime: undefined,
        arrivalTime: undefined,
        weightBillNo: undefined,
        billNo: undefined,
        netWeight: undefined,
        checked: undefined,
        checkBy: undefined,
        checkTime: undefined,
        checkNotes: undefined,
    };
    haulApprovalForm.value = {
        plateNo: undefined,
        driverName: undefined,
        routeName: undefined,
        cargo: undefined,
        departureTime: undefined,
        arrivalTime: undefined,
        weightBillNo: undefined,
        weightBillImgUrl: undefined,
        netWeight: undefined,
        checked: undefined,
        checkBy: undefined,
        checkTime: undefined,
        checkNotes: undefined,
    };
    formView.value = {
        plateNo: undefined,
        driverName: undefined,
        routeName: undefined,
        cargo: undefined,
        departureTime: undefined,
        arrivalTime: undefined,
        weightBillNo: undefined,
        containerNo: undefined,
        checked: undefined,
        checkBy: undefined,
        checkTime: undefined,
        checkNotes: undefined,
    }
    formEdit.value = {
        haulId: undefined,
        plateNo: undefined,
        driverName: undefined,
        routeName: undefined,
        cargo: undefined,
        departureTime: undefined,
        arrivalTime: undefined,
        weightBillNo: undefined,
        billNo: undefined,
        containerNo: undefined,
        checked: undefined,
    }
    proxy.resetForm("formEditRef");
    proxy.resetForm("formApprovalRef");
}

function resetAdd() {
    billAddForm.value = {
        recognitionId: undefined,
        driverId: undefined,
        vehicleId: undefined,
        routeId: undefined,
        departureTime: undefined,
        arrivalTime: undefined,
        weightBillNo: undefined,
        billNo: undefined,
        weightBillImgUrl: undefined,
        netWeight: undefined,
        containerNo: undefined,
        checkNotes: undefined,
        bizSeq: undefined
    };
    file_url.value = ''
    current_file.value = {}
    fileList.value = []
    proxy.resetForm("billAddFormRef");
}

getList();
getRouteSimpleList()
getDriverSimpleList()
getVehicleSimpleList()
</script>

<style lang='scss' scoped>
@import '../../../assets/styles/variables.module.scss';

.app-main-box {
    background: #fff;
    // background: url('../../../assets/images/bg.jpg') no-repeat;
    border-radius: 12px;
    min-height: calc(100vh - 125px);
    width: calc(100% - 40px);



    /** 审核状态 */
    .is-check,
    .no-check {
        display: flex;
        align-items: center;
        justify-content: center;

        &>.icon {
            margin: 0 4px !important;
        }
    }

    .is-check {
        color: $--color-primary;
    }

    .no-check {
        color: #c9c9c9;
    }

    /** 车辆类型tag样式 */
    .vehicle-tag {
        // display: inline-block;
        // padding: 0px 4px;
        // height:  18px;
        // line-height: 18px;
        // border-radius: 2px;
        // background-color: $--color-primary;
        // color: #fff;
        // transform: skewX(-20deg);
        font-size: 14px;
    }

    .other-tag {
        background-color: #c9c9c9;
    }
}

/** 动态对话框样式 */
.dy-dialog {
    grid-gap: 20px;

    :deep(.el-form-item__label) {
        height: 36px;
        text-align: center !important;
        line-height: 36px !important;
    }

    .dy-form {
        flex: 1 !important;

        :deep(.form) {
            width: 100% !important;
        }
    }

    .dy-footer {
        width: 100%;
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

    .el-image-viewer__wrapper {
        right: 20%;
        left: 20%;
        height: auto;
        width: 60% !important;
        height: auto;
    }

    .el-image-viewer__mask {
        opacity: 0 !important;
    }

    .form-items {
        align-items: center !important;

        .form-input {
            height: 36px !important;
            width: 100%;
        }
    }

    .el-form-item--default {
        margin-bottom: 22px !important;
    }

    .model-value {
        display: inline-block;
        width: 100%;
        color: $--color-info;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .model-remark {
        line-height: 1.5;
        word-wrap: break-word !important;
        white-space: normal !important;
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        /* 子元素排列垂直排列 */
        -webkit-line-clamp: 5 !important;
        /* 设置从第几行后开始省略 */
        overflow: hidden;
    }

    // .no-model-value {
    //     font-size: 20px;
    // }
}

/** 表格图片展示样式 */
.el-image {
    background-color: $--color-bg-info !important;
    color: $--color-info !important;

    .image-slot {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        z-index: 2000;
    }
}

.trapezoid-box {
    width: 100% !important;
    display: flex !important;
    margin-bottom: 24px;
}

.grid-cloumn-by-two {
    width: 100% !important;
    display: flex;
    height: 36px;
    // justify-content: space-between !important;
    margin-bottom: 24px;

    .trapezoid-box {
        width: max-content !important;
        display: flex !important;
        margin-bottom: 0px !important;
    }

    .check-groups {
        margin-left: 50px;
        // width: 50%;
        height: 100%;
        line-height: 36px;
    }
}


.upload-demo {
    width: 120px;
    height: 120px;
    background-color: $--color-bg-info;

    .add-attachment {
        width: 120px;
        height: 120px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: $--color-info;
        cursor: pointer;
        vertical-align: middle;
    }

    // 隐藏上upload传文件附件链接
    :deep(.el-upload-list) {
        display: none !important;
    }
}

.upload-demo-disabled {
    width: 120px;
    height: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: $--color-bg-info;
    color: $--color-info;
    overflow: hidden;
    border-radius: 4px;
}

.file-container {
    width: 120px;
    height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid var(--el-border-color);

    .file-image {
        width: 100%;
        height: 100%;
        box-sizing: border-box;

        img {
            display: inline-block;
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
    }

    .file-text {
        width: 80%;
        font-size: 12px;
        height: max-content;
        line-height: 16px;
        min-height: 32px;
        color: $--color-info;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        font-feature-settings: "tnum";

        span {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            word-break: break-all;
            // font-feature-settings: "tnum";
            font-feature-settings: "c2sc", "smcp";
        }
    }
}

.mask-containter {
    width: 120px;
    height: 120px;
    border-radius: 4px;
    display: flex;
    grid-gap: 20px;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, .5);
    position: absolute;
    opacity: 0;
    color: #fff;
}

.mask-containter:hover {
    opacity: 1;
}

.global-justify-between {
    display: flex;
    justify-content: space-between
}
</style>